<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueCDN引入组件的方式Pinia-Router-Axios</title>
    <style>
        .container {
            padding: 0;
            margin: 0;
        }

        .container .wrap {
            margin: 0 auto;
        }

        .highlight {
            background-color: yellow;
        }

        .large-text {
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>{{ message }}</h1>
            <div class="wrap">

            </div>
            <p>{{ $site.name }} - {{ $site.version }}</p>
        </div>
    </div>
    <script src="../lib/vue/3/vue.global.js"></script>
    <script>
        const { createApp, h } = Vue;

        const options = {
            data: function () {
                return {
                    message: 'Hello',
                    count: 0,
                    isHighlighted: true,
                    useLargeText: false
                }
            },
            // template: '<h1 class="template">{{ message }}</h1>',
            render() {
                // 示例1：使用 h 函数创建元素
                return Vue.h('h1', { style: 'color: blue; font-size: 24px;' }, this.message);
                // 示例2：使用 h 函数创建事件元素
                // return h('div', [
                //     h('p', `Count: ${this.count}`),
                //     h('button', {
                //         onClick: () => this.count++
                //     }, 'Increment')
                // ]);
                // 示例3：动态类绑定
                // return h('div', {
                //     class: [
                //         'box',
                //         { highlight: this.isHighlighted },
                //         this.useLargeText ? 'large-text' : ''
                //     ]
                // }, this.message);
            }
        }

        const app = createApp(options);

        // （可选）全局注入 $site 方便模板访问（实际开发建议在 setup 中使用）
        app.config.globalProperties.$site = {
            name: 'My Vue App',
            version: '1.0.0'
        };

        // 挂载
        app.mount('#app');
    </script>
</body>